<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab选项卡</title>
<link rel="stylesheet" href="./tab.css">
</head>
<body>
  <!-- Tab选项卡1 -->
<div class="box box1">
    <!-- 标题 -->
    <ul>
        <li>1</li>
        <li class="active">2</li>
        <li>3</li>
    </ul>
    <!-- 内容 -->
    <ol>
        <li>1</li>
        <li class="active">2</li>
        <li>3</li>
    </ol>
</div>

<!-- Tab选项卡2 -->
<div class="box box2">
    <!-- 标题 -->
    <ul>
        <li>1</li>
        <li class="active">2</li>
        <li>3</li>
    </ul>
    <!-- 内容 -->
    <ol>
        <li>1</li>
        <li class="active">2</li>
        <li>3</li>
    </ol>
</div>

<!-- Tab选项卡3 -->
<div class="box box3">
    <!-- 标题 -->
    <ul>
        <li>1</li>
        <li class="active">2</li>
        <li>3</li>
    </ul>
    <!-- 内容 -->
    <ol>
        <li>1</li>
        <li class="active">2</li>
        <li>3</li>
    </ol>
</div>
<script src="./tab.js"></script>
<script type="module">
// import Tab from './tab.js'
//没有写大括号，所以是默认导出 

const tab1=new Tab(".box1",{})
const tab2=new Tab(".box2",{})
const tab3=new Tab(".box3",{})

</script>
</body>
</html>